<template>
  <div class="homeBox box">
    <header>
      <van-nav-bar
        left-text="分类"
        :right-text="rightText"
        @click-left="$router.push('/kind')"
        @click-right="onRight"
      >
        <template #title>
          <van-search placeholder="请输入搜索关键词" shape="round" readonly @click="$router.push('/search')" />
        </template>
      </van-nav-bar>
    </header>
    <div class="content" ref="cont" @scroll="isScroll">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.bannerId">
          <van-image
            :src="item.img"
            :alt="item.alt"
            :title="item.title"
          />
        </van-swipe-item>
      </van-swipe>
      <van-grid :column-num="5">
        <van-grid-item v-for="val in kindList" :key="val.title" :icon="val.icon" :text="val.title" />
      </van-grid>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- 标签式跳转/视图式跳转 -->
          <!-- <router-link
            v-for="item in proList"
            :key="item.proId"
            to="/detail"
            replace
          > -->
            <van-card
              v-for="item in proList"
              :key="item.proId"
              :num="item.sales"
              :price="item.price"
              :title="item.proName"
              :thumb="item.proImg"
              @click="toDetail(item.proId)"
            />
            <!-- 编程式跳转：↑↑↑通过点击事件,调用方法,在方法内部,找到当前实例的$router对象,使用对应方法跳转 -->
          <!-- </router-link> -->
        </van-list>
      </van-pull-refresh>
    </div>
    <van-icon name="back-top" @click="goToTop" v-if="isShowTop" class="myTop" />
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Image as VanImage, Grid, GridItem, Card, List, PullRefresh, Icon, NavBar, Search, Button } from 'vant'
import { getBanner, getKind, getPro } from '../../request/index.js'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Card)
Vue.use(List)
Vue.use(PullRefresh)
Vue.use(Icon)
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Button)

export default {
  name: 'Home',
  data () {
    return {
      bannerList: [],
      kindList: [],
      proList: [],
      isLoading: false,
      loading: false,
      finished: false,
      index: 0,
      isShowTop: false,
      rightText: '登录'
    }
  },
  methods: {
    onRefresh () {
      this.index = 0
      getPro({
        index: this.index,
        num: 10
      }).then(data => {
        this.proList = data.data.data
        this.isLoading = false
      })
    },
    onLoad () {
      // console.log('页面到底部了,可以开始加载数据了')
      getPro({
        index: ++this.index,
        num: 10
      }).then(data => {
        // 合并
        this.proList = this.proList.concat(data.data.data)
        this.loading = false
        if (data.data.data.length < 1) {
          this.finished = true
        }
      })
    },
    goToTop () {
      this.$refs.cont.scrollTop = 0
    },
    isScroll () {
      if (this.$refs.cont.scrollTop > 1000) {
        this.isShowTop = true
        // this.$refs.goTop.style.cssText = 'font-size:20px;width:0.6rem;height:0.6rem;background:#efefef;border:solid 1px #ccc;position:fixed;text-align:center;line-height:0.6rem;right:0.2rem;bottom:1rem;'
      } else {
        this.isShowTop = false
      }
    },
    toDetail (id) {
      this.$router.push('/detail/' + id)
    },
    onRight () {
      if (localStorage.getItem('isLogin') === 'ok' && localStorage.getItem('token')) {
        this.$router.push('/my')
      } else {
        this.$router.push('/login?to=/home')
      }
    }
  },
  mounted () {
    // console.log(this.$store)
    // axios.get('http://localhost:3000/api/banner').then(data => {
    //   // console.log(data)
    //   // console.log(data.data)
    //   console.log(data.data.data)
    // })
    if (this.$store.state.login.isLogin === 'ok' && this.$store.state.login.token) {
      this.rightText = '我的'
    } else {
      this.rightText = '登录'
    }
    getBanner().then(data => {
      // console.log(data.data.data)
      this.bannerList = data.data.data
    })
    getKind({
      column: 'type'
    }).then(data => {
      data.data.data.forEach(val => {
        this.kindList.push({
          title: val,
          icon: 'phone-o'
        })
      })
      this.kindList.length = 10
      this.kindList[1].icon = 'cart-o'
    })
    getPro({
      index: this.index,
      num: 10
    }).then(data => {
      this.proList = data.data.data
    })
  }
}
</script>

<style lang="scss">
.homeBox{
  header{
    width:100%;
    background: red;
    .van-nav-bar__content{
      height: auto;
    }
  }
  .content{
    overflow: auto;
    flex: 1;
    .my-swipe .van-swipe-item {
      height: auto;
      img{
        width: 100vw;
      }
    }
  }
  .myTop{
    font-size:20px;
    width:0.6rem;
    height:0.6rem;
    background:#efefef;
    border:solid 1px #ccc;
    position:fixed;
    text-align:center;
    line-height:0.6rem;
    right:0.2rem;
    bottom:1rem;
  }
}
</style>
